<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拓深科技</title>
    <#include "./css.ftl">
</head>
<body>
<div id="wrapper">

    <#include "./left_nav.ftl">

    <div id="page-wrapper" class="gray-bg dashbard-4">
        <#include "./top_nav.ftl">

        <#include "./index_model_2.ftl">

        <#include "./bottom_nav.ftl">
    </div>

</div>


<#include "./js.ftl">

<#--index_mode_2-->
<script>

    $(function(){
        $.ajax({
            type: "GET",
            contentType: "application/json",
            dataType: "json",
            url: "${baseURL}/water/index_page/getArea",
            async:false,
            success: function (data) {
                if(data.code === 0){
                    $("#areaSelect2").select2({
                        language: {
                            "noResults": function () {
                                return "没有数据";
                            }
                        },
                        allowClear:false,
                        placeholder: "请选择区域位置",
                        data:data.data
                    });
                }
            }
        });
        var geo_id = $("#areaSelect2").find("option:selected").val();
        var imgUrl = "http://" + getURL() + "${baseURL}/water/file/location/getMap?id=" + geo_id;
        if(geo_id == undefined){
            geo_id = 1;
            imgUrl = "assets/img/error.jpg";
        }
        $("#mapPicture").empty();
        $("#mapPicture").append(
                '<img id="mapImg" width="100%" src='+ imgUrl + ' style="margin:0;padding: 0"  />'
        );

        $.ajax({
            type: "GET",
            contentType: "application/json",
            dataType: "json",
            url: "${baseURL}/water/map_pos_geo/getAll?geo_id=" + geo_id,
            async: false,
            success:function(data){
                if(data.code === 0){
                    $("#mapImg").load(function () {
                        var w = $("#mapImg").width();
                        var h = $("#mapImg").height();
                        for(var index in data.data) {
                            var name = data.data[index].name;
                            var x_pos = data.data[index].pos_x;
                            var y_pos = data.data[index].pos_y;
                            var id = data.data[index].id;
                            $("#mapPicture").append(
                                    '<div class="ip_tooltip ip_img32" style="top:' + (h * y_pos) + "px" + ' ; left:' + (w * x_pos) + "px" + ' ;" data-tooltipbg="bgblack" data-animationtype="btt-slide"  data-round="roundBgW"><p style="text-align: center">'+name+'</p>' +
                                    '<button type="button" class="btn btn-default btn-block" onclick="buildingDetail('+id+')" >地图</button><button type="button" class="btn btn-warning btn-block" onclick="alarmDetail('+id+')" >警情</button>' +
                                    '</div>'
                            );
                        }
                        $("#iPicture").iPicture();
                    });

                }else{
//                    swal({
//                        title: "没有地图坐标点。",
//                        type: "warning"
//                    })
                }
            },
            error:function(xhr, status, error){
                console.log(xhr);
                swal({
                    title: "请求异常。",
                    type: "error"
                })
            }
        });

    });

    $("#areaSelect2").on("select2:open change",function(e){
        var geo_id = $("#areaSelect2").find("option:selected").val();
        var imgUrl = "http://" + getURL() + "${baseURL}/water/file/location/getMap?id=" + geo_id;
        if(geo_id == undefined){
            geo_id = 1;
            imgUrl = "assets/img/error.jpg";
        }
        $("#mapPicture").empty();
        $("#mapPicture").append(
                '<img id="mapImg" width="100%" src='+ imgUrl + ' style="margin:0;padding: 0"  />'
        );

        $.ajax({
            type: "GET",
            contentType: "application/json",
            dataType: "json",
            url: "${baseURL}/water/map_pos_geo/getAll?geo_id=" + geo_id,
            async: false,
            success:function(data){
                if(data.code === 0){
                    $("#mapImg").load(function () {
                        var w = $("#mapImg").width();
                        var h = $("#mapImg").height();
                        for(var index in data.data) {
                            var name = data.data[index].name;
                            var x_pos = data.data[index].pos_x;
                            var y_pos = data.data[index].pos_y;
                            var id = data.data[index].id;
                            $("#mapPicture").append(
                                    '<div class="ip_tooltip ip_img32" style="top:' + (h * y_pos) + "px" + ' ; left:' + (w * x_pos) + "px" + ' ;" data-tooltipbg="bgblack" data-animationtype="btt-slide"  data-round="roundBgW"><p style="text-align: center">'+name+'</p>' +
                                    '<button type="button" class="btn btn-default btn-block" onclick="buildingDetail('+id+')" >地图</button><button type="button" class="btn btn-warning btn-block" onclick="alarmDetail('+id+')" >警情</button>' +
                                    '</div>'
                            );
                        }
                        $("#iPicture").iPicture();
                    });

                }else{
//                    swal({
//                        title: "没有地图坐标点。",
//                        type: "warning"
//                    })
                }
            },
            error:function(xhr, status, error){
                console.log(xhr);
                swal({
                    title: "请求异常。",
                    type: "error"
                })
            }
        });


    });

    function buildingDetail(id){
        window.open("map_show");
    }

    function alarmDetail(id){
        window.open("alarm_event");
    }

</script>
</body>
</html>